<template>
    <div class="more_body_">
        <div class="more_centered">
            <div class="myheader_">
                <div class="_back">
                    <a href="#/user" style="text-decoration: none;">&lt;</a>
                </div>
                <div class="mine_order">
                    <span>我的报名单</span>
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="first">
                    <div class="product-list">
                        <div v-if="AllData.length > 0">
                            <div class="product-item" v-for="(item) in AllData" :key="item.productId"
                                @click="goToProductDetail(item.productId)">
                                <img :src="item.product.image" alt="product image" class="product-image" />
                                <div class="product-info">
                                    <span style="font-size: 20px;">报名单号:{{ item.orderId }}</span><br>
                                    <h3 class="product-name">{{ item.product.name }}</h3>
                                    <p class="product-price">￥{{ item.product.price }}</p>
                                </div>
                                <el-button class="order_button" v-if="item.paymentStatus == 2" type="primary"
                                    @click.stop="openPaymentDialog(item.id)">去支付</el-button>
                                <el-button class="order_button" type="warning" disabled v-else-if="item.orderStatus == 3">
                                    退款中
                                </el-button>
                                <el-button class="order_button" v-else-if="item.orderStatus == 4" type="warning" disabled>
                                    已退款
                                </el-button>
                                <el-button class="order_button" v-else-if="item.orderStatus == 2" type="primary"
                                    @click.stop="confirmRefund(item.id)">
                                    申请退款
                                </el-button>
                            </div>
                        </div>
                        <div v-else>
                            <p>暂无数据</p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="待付款" name="second">
                    <div class="product-list">
                        <div v-if="readyData.length > 0">
                            <div class="product-item" v-for="(item) in readyData" :key="item.productId"
                                @click="goToProductDetail(item.productId)">
                                <img :src="item.product.image" alt="product image" class="product-image" />
                                <div class="product-info">
                                    <span style="font-size: 20px;">报名单号:{{ item.orderId }}</span><br>
                                    <h3 class="product-name">{{ item.product.name }}</h3>
                                    <p class="product-price">￥{{ item.product.price }}</p>
                                </div>
                                <el-button class="order_button" v-if="item.paymentStatus == 2" type="primary"
                                    @click.stop="openPaymentDialog(item.id)">去支付</el-button>
                                <el-button class="order_button" type="warning" disabled v-else-if="item.orderStatus == 3">
                                    退款中
                                </el-button>
                                <el-button class="order_button" v-else-if="item.orderStatus == 4" type="warning" disabled>
                                    已退款
                                </el-button>
                                <el-button class="order_button" v-else-if="item.orderStatus == 2" type="primary"
                                    @click.stop="confirmRefund(item.id)">
                                    申请退款
                                </el-button>
                            </div>
                        </div>
                        <div v-else>
                            <p>暂无数据</p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="待入学" name="third">
                    <div class="product-list">
                        <div v-if="readyIn.length > 0">
                            <div class="product-item" v-for="(item) in readyIn" :key="item.productId"
                                @click="goToProductDetail(item.productId)">
                                <img :src="item.product.image" alt="product image" class="product-image" />
                                <div class="product-info">
                                    <span style="font-size: 20px;">报名单号:{{ item.orderId }}</span><br>
                                    <h3 class="product-name">{{ item.product.name }}</h3>
                                    <p class="product-price">￥{{ item.product.price }}</p>
                                </div>

                                <el-button class="order_button" type="warning" disabled v-if="item.orderStatus == 3">
                                    退款中
                                </el-button>
                                <el-button class="order_button" v-else-if="item.orderStatus == 4" type="warning" disabled>
                                    已退款
                                </el-button>
                                <el-button class="order_button" v-else type="primary" @click.stop="confirmRefund(item.id)">
                                    申请退款
                                </el-button>
                            </div>
                        </div>
                        <div v-else>
                            <p>暂无数据</p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已入学" name="fourth">
                    <div class="product-list">
                        <div v-if="haveIn.length > 0">
                            <div class="product-item" v-for="(item) in haveIn" :key="item.productId"
                                @click="goToProductDetail(item.productId)">
                                <img :src="item.product.image" alt="product image" class="product-image" />
                                <div class="product-info">
                                    <span style="font-size: 20px;">报名单号:{{ item.orderId }}</span><br>
                                    <h3 class="product-name">{{ item.product.name }}</h3>
                                    <p class="product-price">￥{{ item.product.price }}</p>
                                </div>
                                <el-button class="order_button" type="warning" disabled v-if="item.orderStatus == 3">
                                    退款中
                                </el-button>
                                <el-button class="order_button" v-else-if="item.orderStatus == 4" type="warning" disabled>
                                    已退款
                                </el-button>
                                <el-button class="order_button" v-else type="primary" @click.stop="confirmRefund(item.id)">
                                    申请退款
                                </el-button>
                            </div>
                        </div>
                        <div v-else>
                            <p>暂无数据</p>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>

            <div>
                <el-dialog title="付款" :visible.sync="dialogFormVisible" width="30%" center>
                    <el-form :model="form">
                        <el-form-item label="订单ID" :label-width="formLabelWidth" v-if="!selectedOrderId">
                            <span>{{ selectedOrderId }}</span>
                        </el-form-item>

                        <el-form-item label="付款方式" :label-width="formLabelWidth">
                            <el-select v-model="form.payType" placeholder="请选择付款方式">
                                <el-option label="微信支付" value="1"></el-option>
                                <el-option label="支付宝支付" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收款二维码" class="payImage">
                            <img v-if="form.payType === '1'" src="../../assets/wechat.jpg" alt="微信收款二维码">
                            <img v-else-if="form.payType === '2'" src="../../assets/alipay.jpg" alt="支付宝收款二维码">
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitPayment(selectedOrderId)">确定完成支付</el-button>
                    </div>
                </el-dialog>

            </div>

        </div>
    </div>
</template>
  
<script>
import { jwtDecode } from 'jwt-decode';
import { MessageBox } from 'element-ui';
export default {
    data() {
        return {
            activeName: 'first',
            AllData: [],//全部数据
            readyData: [],  //待付款数据
            readyIn: [],   //待入学数据
            haveIn: [],  //已入学数据
            dialogFormVisible: false,
            form: {
                payType: '',
            },
            selectedOrderId: null,
            formLabelWidth: '70px'
        };
    },
    methods: {
        //确认退款
        //确认校验
        confirmRefund(orderId) {
            MessageBox.confirm('是否要确认退款？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                // 用户点击了确定按钮，执行删除逻辑
                this.confrimRefund(orderId);
            }).catch(() => {

            });
        },
        /*确认退款*/
        confrimRefund(orderId) {
            this.$http.put('/api/orders/updateOrderStatus/' + orderId)
                .then(response => {
                    if (response && response.data && response.data.code === 0) {
                        this.$message.error(response.data.message);
                    } else {
                        this.$message.success("正在申请退款，等待确认");
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },

        //完成付款
        openPaymentDialog(orderId) {
            this.selectedOrderId = orderId; // 存储选定的订单ID
            this.dialogFormVisible = true; // 打开对话框
        },

        submitPayment(orderId) {
            this.$http.put('/api/orders/updatePaymentStatus/' + orderId).then(() => {
                // 处理支付状态更新成功的逻辑
                this.$message.success("支付成功");
                this.dialogFormVisible = false; // 打开对话框
                this.getAllData();
            }).catch((error) => {
                console.error('Error updating payment status:', error);
            });
            const paymentData = {
                id: orderId,
                payType: this.form.payType
            };

            this.$http.post('/api/orders/updateOrder', paymentData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {

                })
                .catch(error => {
                    // 处理支付失败的逻辑
                    console.error('Error submitting payment:', error);
                });
        },

        //获取全部数据
        getAllData() {
            const jwt = localStorage.getItem('jwt');
            if (jwt) {
                const decoded = jwtDecode(jwt);
                const userId = decoded.id; // 确保你的token结构中有id字段
                this.$http.get("/api/orders/queryOneStudentOrder/" + userId).then(response => {  /*刷新页面*/
                    this.AllData = response.data.data.rows;
                }).catch(() => {
                    this.$message.error("请求错误");
                });
            }
        },

        //获取待付款
        getreadyData() {
            const jwt = localStorage.getItem('jwt');
            if (jwt) {
                const decoded = jwtDecode(jwt);
                const userId = decoded.id; // 确保你的token结构中有id字段
                this.$http.get("/api/orders/queryOneStudentPaymentStatus2/" + userId).then(response => {  /*刷新页面*/
                    this.readyData = response.data.data;
                }).catch(() => {
                    this.$message.error("请求错误");
                });
            }
        },

        //获取待入学
        getreadyIn() {
            const jwt = localStorage.getItem('jwt');
            if (jwt) {
                const decoded = jwtDecode(jwt);
                const userId = decoded.id; // 确保你的token结构中有id字段
                this.$http.get("/api/orders/queryOneStudentPaymentStatus1/" + userId).then(response => {  /*刷新页面*/
                    this.readyIn = response.data.data;
                }).catch(() => {
                    this.$message.error("请求错误");
                });
            }
        },
        //获取已入学
        gethaveIn() {
            const jwt = localStorage.getItem('jwt');
            if (jwt) {
                const decoded = jwtDecode(jwt);
                const userId = decoded.id; // 确保你的token结构中有id字段
                this.$http.get("/api/orders/queryOneStudentOrderStatus1/" + userId).then(response => {  /*刷新页面*/
                    this.haveIn = response.data.data;
                }).catch(() => {
                    this.$message.error("请求错误");
                });
            }
        },


        handleClick(tab, event) {
            if (tab.name == 'first') {
                this.getAllData();
            }
            if (tab.name == 'second') {
                this.getreadyData();
            }
            if (tab.name == 'third') {
                this.getreadyIn();
            }
            if (tab.name == 'fourth') {
                this.gethaveIn();
            }
        },

        //跳转产品详情页面
        goToProductDetail(productId) {
            this.$router.push({ name: 'ProductDetail', params: { id: productId } });
        },
    },
    mounted() {
        const jwt = localStorage.getItem('jwt');
        if (jwt) {
            const decoded = jwtDecode(jwt);
            const userId = decoded.id; // 确保你的token结构中有id字段
            this.$http.get("/api/orders/queryOneStudentOrder/" + userId).then(response => {  /*刷新页面*/
                this.AllData = response.data.data.rows;
            }).catch(() => {
                this.$message.error("请求错误");
            });

        }
    },
};
</script>
  
<style>
@import "@/style/userOrder.css";
</style>